{% extends 'base_dashboard.html' %}

{% block title %}{% if action == 'Edit Module' %}Edit{% else %}Add{% endif %} Module — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .mf-context-banner {
    background: linear-gradient(90deg, #eff6ff, #dbeafe);
    border-radius: .75rem; padding: .875rem 1.125rem;
    display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem;
  }
  .mf-context-banner .mfcb-icon {
    width: 38px; height: 38px; border-radius: .5rem; background: #1a56db;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem; flex-shrink: 0;
  }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">{% if action == 'Edit Module' %}Edit Module{% else %}Add Module{% endif %}</h4>
        <p class="text-muted small mb-0">Organise your course content into structured modules</p>
    </div>
    <a href="{% url 'courses:manage_course' pk=course.pk %}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Course
    </a>
</div>

<div style="max-width:580px;">
    <!-- Course context banner -->
    <div class="mf-context-banner">
        <div class="mfcb-icon"><i class="bi bi-collection-fill"></i></div>
        <div>
            <div class="fw-semibold small text-dark">{{ course.title }}</div>
            <div class="text-muted" style="font-size:.75rem;">
                {% if action == 'Edit Module' %}Editing a module in this course{% else %}New module will be added to this course{% endif %}
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-4">
            <form method="post" novalidate>
                {% csrf_token %}
                {% if form.non_field_errors %}
                <div class="alert alert-danger rounded-3 small mb-3">
                    {% for error in form.non_field_errors %}<div>{{ error }}</div>{% endfor %}
                </div>
                {% endif %}

                <div class="mb-3">
                    <label class="form-label fw-medium small">Module Title <span class="text-danger">*</span></label>
                    {{ form.title }}
                    {% if form.title.errors %}<div class="text-danger small mt-1">{{ form.title.errors.0 }}</div>{% endif %}
                </div>
                <div class="mb-4" style="max-width:160px;">
                    <label class="form-label fw-medium small">Display Order</label>
                    {{ form.order }}
                    {% if form.order.errors %}<div class="text-danger small mt-1">{{ form.order.errors.0 }}</div>{% endif %}
                    <div class="form-text small">Lower numbers appear first.</div>
                </div>

                <div class="d-flex gap-2 pt-2 border-top">
                    <button type="submit" class="btn btn-primary px-4 fw-semibold">
                        <i class="bi bi-check-circle me-2"></i>{% if action == 'Edit Module' %}Save Changes{% else %}Add Module{% endif %}
                    </button>
                    <a href="{% url 'courses:manage_course' pk=course.pk %}" class="btn btn-outline-secondary px-3">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}